import React from 'react';
import './App.css';
import Utils from './utils/utils';
import TableColumns from './constants/TableColumns';
import TableData from './constants/TableData';
import ETable from './components/ETable'
import { Avatar } from 'antd';

class App extends React.Component{
    constructor(props){
        super(props)
        this.state={
            list:[],
            page:1,
        }
    }

    componentWillMount(){
        this.requestList();
    }

    //渲染数据
    requestList= () =>{
        var { page } = this.state;
        let params ={
            pageNo: page,
            pageSize: 10,
            paging: -1,
        }
        let list=[];
        let padge = params.pageNo - 1
        let result = TableData
        list = result.map((item, index) => {
            item.key = index + padge * params.pageSize;

            return item;
        });
        params.totalRows = result.length
        this.setState({
            list,
            pagination: Utils.pagination(params, (current) => {
            }) 
        })
    }
    render(){
        const columns = TableColumns
        for (let i = 0; i < columns.length; i++) {
            const item = columns[i];
            if (item.key !== 'cy') {
                continue
            }
            columns[i].render= (text, record) => {
                let url = `https://racing.hkjc.com/racing/content/Images/RaceColor/${text}.gif`
                return (
                    <Avatar src={url} />
                )
            }
        }
        
        return (
            <div style={{justifyContent:'center',flex:1,}}>
                <div style={{width:1080}}>
                    <ETable  
                        showIndex
                        columns={columns}
                        dataSource={this.state.list}
                        pagination={this.state.pagination} 
                        updateSelectedItem={Utils.updateSelectedItem.bind(this)}
                        selectedRowKeys={this.state.selectedRowKeys}
                        selectedIds={this.state.selectedIds}
                        scroll={{y:600,x:1350}}
                        rowSelection={'checkbox'}
                    />
                </div>
            </div>
        );
    }
}

export default App;
